<template>
  <div v-if="isTip" class="tcMaskBg">
    <ul class="tcMask">
    	<li class="tcPopBg"
      v-for="(msg_pop_It,msg_pop_Idx) in msg_pop_Arr"
      :key="'msg_pop_It_0'+msg_pop_Idx">
    		<div class="tcPop">
          <img v-show="msg_pop_It.img!==1" src="@/assets/img/pop/err.png" alt="" class="err">
          <img v-show="msg_pop_It.img==1" src="@/assets/img/pop/suc.png" alt="" class="err">
          <dl class="txt">
            <dt>
              温馨提示
            </dt>
            <dd>
              {{msg_pop_It.text}}
            </dd>
          </dl>
          <!-- <img @click="closeMsgPop(msg_pop_Idx)" src="@/assets/img/pop/closeBtn.png" alt="" class="close"> -->
    		</div>
    	</li>
    </ul>
  </div>
</template>

<script>

	// 事件总线：第11天 02-(掌握)首页开发-滚动区域的Bug分析和解决
	// 事件总线传值  https://www.cnblogs.com/ll15888/p/11583713.html
	// 可以传多个值
	// this.$bus.$emit("toastEvent","参数1","参数2","参数3");

	// this.$bus.$on("toastEvent",(parm00,parm01,parm02)=>{
	// 	console.log(parm00); // 参数0
	// 	console.log(parm01); // 参数1
	// 	console.log(parm02); // 参数2
	// 	this.tipMethod(1111);
	// });
	export default{
		data(){
			return{
				isTip:false,
        msg_pop_Arr:[]
			}
		},
		created() {
			this.$bus.$on("toastEvent",(val01,val02)=>{
				this.tipMethod(val01,val02);
			});
		},
    watch:{
      '$store.state.msgPopArr':{
        handler:function(newVal,oldVal){
          let that=this;
          //console.log("弹窗:",newVal);
          this.msg_pop_Arr=newVal;
          let msgLen=this.msg_pop_Arr.length;
          //console.log("弹窗长度:",msgLen);
          if(msgLen>=1){
            setTimeout(()=>{
              let last_msg_pop=document.getElementsByClassName("tcPopBg")[msgLen-1];
              last_msg_pop.className="tcPopBg last_tc_pop";
              //console.log("last_msg_pop:",last_msg_pop);
            },100);
          }else{
            that.isTip=false;
          }

        },
        deep:true,
        immediate:true
      }
    },
		methods:{
      setVis(x,y){
        let that=this;
        that[x]=y;
      },
			tipMethod(val,is_img){
				this.isTip=true; 
				// setTimeout(()=>{
				// 	this.isTip=false;
				// 	if(fn){
				// 		fn();
				// 	}
				// },2500);
        let pop_obj={
          text:val,
          img:is_img
        }
        this.$store.commit('setMsgPop',pop_obj);
			},
      closeMsgPop(val){
        let that=this; 
        this.$store.dispatch('del_msgPopArr',val);
      }
		}
	}
</script>

<style lang="less">
  .tcMaskBg{
    position: fixed;
    top: 25px;
    right: 25px;
    z-index:13;
    width:408px;
    height: 458px;
    overflow: hidden;
    .tcMask{
      position: absolute;
      bottom: 0;
      left: 0;
      padding: 4px;
      width: 400px;
      min-height: 450px;
      .tcPopBg{
        background-color: #fff;
        border-radius:3px;
        padding: 15px 20px;
        box-shadow: 0 0 4px #ccc;
        margin-bottom: 20px;
        opacity: 0;
        transition: .5s;
        .tcPop{
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          img{
            display: block;
          }
          .err{
            display: block;
            width: 30px;
            height: 30px;
          }
          .close{
            display: block;
            width: 10px;
            height: 10px;
            cursor: pointer;
          }

          .txt{
            width: 295px;
            dt{
              color: #000;
              font-size: 16px;
              line-height: 22px;
            }
            dd{
              color: #666;
              font-size: 14px;
              line-height: 22px;
            }
          }
        }
      }
      .last_tc_pop{
        opacity: 1 !important;
      }
      .tcPopBg:last-child{
        margin-bottom: 0;
      }
    }
  }

</style>
